<cly-dropdown
    class="cly-vue-select-x"
    ref="dropdown"
    :width="width"
    :placeholder="placeholder"
    :disabled="disabled"
    :pop-class="popClass"
    :popper-append-to-body="popperAppendToBody"
    v-bind="$attrs"
    v-on="$listeners"
    @show="handleDropdownShow"
    @hide="focusOnTrigger">
    <template v-slot:trigger="dropdown">
        <slot name="trigger" v-bind:dropdown="dropdown">
            <el-select-head
                v-if="isMultiple"
                multiple
                ref="trigger"
                class="el-select-head"
                :disabled="disabled"
                :opened="dropdown.visible"
                :placeholder="placeholder"
                :arrow="arrow"
                :value="value"
                :collapse-tags="collapseTags"
                @change="commitValue"
                :options-lookup="selectedOptions">
            </el-select-head>
            <cly-input-dropdown-trigger
                v-else
                ref="trigger"
                :size="size"
                :disabled="disabled"
                :adaptive-length="adaptiveLength"
                :min-width="minInputWidth"
                :max-width="maxInputWidth"
                :focused="dropdown.focused"
                :opened="dropdown.visible"
                :placeholder="placeholder"
                :arrow="arrow"
                :selected-options="selectedOptions">
            </cly-input-dropdown-trigger>
        </slot>
    </template>
    <div class="cly-vue-select-x__pop" :class="popClasses">
        <div class="cly-vue-select-x__header">
			<div class="bu-level">
				<div class="cly-vue-select-x__title" v-if="title">{{title}}</div>
				<div class='bu-level-right text-small color-cool-gray-50' v-if="showSelectedCount">{{selectedCountText}}</div>
			</div>
            <div class="cly-vue-select-x__header-slot" v-if="!!$scopedSlots.header">
                <slot name="header" :active-tab-id="activeTabId" :tabs="publicTabs" :update-tab="updateTabFn"></slot>
            </div>
            <div class="bu-level">
                <div class="bu-level-item" v-if="isSearchShown">
                    <el-input
                        v-show="showList"
                        ref="searchBox"
                        autocomplete="off"
                        :disabled="disabled"
                        v-model="searchQuery"
                        @keydown.native.esc.stop.prevent="doClose"
                        :placeholder="searchPlaceholder">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </div>
                <slot name="action"></slot>
            </div>
        </div>
        <el-tabs
            v-loading="isQueryPending"
            v-model="activeTabId"
            @keydown.native.esc.stop.prevent="doClose">
            <el-tab-pane :name="tab.name" :key="tab.name" v-for="tab in publicTabs">
                <span slot="label">
                    {{tab.label}}
                </span>
                <cly-listbox
                    :noMatchFoundPlaceholder="noMatchFoundPlaceholder"
                    v-show="showList"
                    v-if="mode === 'single-list'"
                    :bordered="false"
                    :options="getMatching(tab.options)"
                    @change="handleValueChange"
                    :hasRemovableOptions="hasRemovableOptions"
                    @remove-option="removeOption"
                    v-model="innerValue">
                    <template v-slot:option-prefix="scope">
                        <slot name="option-prefix" v-bind="scope"></slot>
                    </template>
                    <template v-slot:option-suffix="scope">
                        <slot name="option-suffix" v-bind="scope"></slot>
                    </template>
                </cly-listbox>
                <cly-checklistbox
                    :noMatchFoundPlaceholder="noMatchFoundPlaceholder"
                    v-show="showList"
                    v-else-if="mode === 'multi-check'"
                    :disable-non-selected="disableNonSelected"
                    :bordered="false"
                    :options="getMatching(tab.options)"
                    @change="handleValueChange"
                    v-model="innerValue">
                </cly-checklistbox>
                <cly-checklistbox
                    :noMatchFoundPlaceholder="noMatchFoundPlaceholder"
                    v-show="showList"
                    v-else-if="mode === 'multi-check-sortable'"
                    :disable-non-selected="disableNonSelected"
                    :sortable="true"
                    :bordered="false"
                    :persistColumnOrderKey="persistColumnOrderKey"
                    ref="checkListBox"
                    :options="getMatching(tab.options)"
                    @change="handleValueChange"
                    v-model="innerValue">
                </cly-checklistbox>
                <slot name="selectList" :searchQuery="searchQuery"></slot>
            </el-tab-pane>
        </el-tabs>
        <div class="cly-vue-select-x__footer" v-if="!autoCommit">
            <div class="cly-vue-select-x__commit-section">
                <el-button @click="doDiscard" type="secondary" size="small">{{ i18n("common.cancel") }}</el-button>
                <el-button @click="doCommit" :disabled="disabled || !isItemCountValid" type="success" size="small">{{ i18n("common.confirm") }}</el-button>
            </div>
        </div>
    </div>
</cly-dropdown>